<template>
  <Select
    class="custom-select"
    ref="select"
    :size="size"
    :value="value"
    :placeholder="placeholder"
    :multiple="multiple"
    :clearable="clearable"
    :transfer="transfer"
    :disabled="disabled"
    :filterable="filterable"
    @on-open-change="selectOpen"
    @on-change="selectChange">
    <slot v-if="isCustomOption" />

    <template v-else-if="isOptionGroup">
      <OptionGroup
        v-for="(item, index) in list"
        :label="item[optionGroupLabelKey]"
        :key="`${item[optionGroupLabelKey]}${index}`">
        <Option
          v-for="(child, childIndex) in item[optionGroupListKey]"
          :value="child[valKey]"
          :key="`${child[valKey]}${childIndex}`">{{ child[labelKey] }}</Option>
      </OptionGroup>
    </template>

    <template v-else>
      <Option
        v-for="(item, index) in list"
        :value="item[valKey]"
        :key="`${item[valKey]}${index}`">{{ item[labelKey] }}</Option>
    </template>
  </Select>
</template>

<script>
export default {
  emits: ['on-change', 'input', 'selectOpen', 'selectClose'],
  props: {
    value: {
      type: [String, Number, Array]
    },
    size: {
      type: String,
      default: 'default'
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    transfer: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: false
    },
    optionList: {
      type: Array,
      default: () => []
    },
    valKey: {
      type: String,
      default: 'value'
    },
    labelKey: {
      type: String,
      default: 'label'
    },
    optionGroupLabelKey: {
      type: String,
      default: 'label'
    },
    optionGroupListKey: {
      type: String,
      default: 'children'
    },
    isOptionGroup: {
      type: Boolean,
      default: false
    },
    isCustomOption: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    optionList (newVal) {
      this.filterOption(newVal)
    }
  },
  created () {
    this.filterOption(this.optionList)
  },
  data () {
    return {
      list: []
    }
  },
  methods: {
    filterOption (list) {
      const valKey = this.valKey
      const optionGroupLabelKey = this.optionGroupLabelKey
      
      const arr = JSON.parse(JSON.stringify(list))
      let newList = []

      if (!this.isOptionGroup) {
        newList = arr.map(item => {
          if (item[valKey] !== null && item[valKey] !== undefined && item[valKey] !== '') {
            return item
          }
        }) || []
      } else {
        arr.map(item => {
          if (item[optionGroupLabelKey]) {
            const newItem = JSON.parse(JSON.stringify(item[optionGroupLabelKey]))
            
            item[optionGroupLabelKey] = newItem.map(child => {
              if (child[valKey] !== null && child[valKey] !== undefined && child[valKey] !== '') {
                return child
              }
            }) || []
          }

          newList.push(item)
        })
      }
      
      this.list = newList
    },
    selectChange (val) {
      this.$emit('input', val)
      this.$emit('on-change', val)
    },
    selectOpen (bol) {
      if (bol) {
        this.$emit('selectOpen')
      } else {
        this.$emit('selectClose')
      }
    },
    clearSingleSelect () {
      this.$refs['select'].clearSingleSelect()
    }
  }
}
</script>

<style lang="scss">
  @import 'common/scss/color';

  .custom-select {
    width: 100%;
    &.ivu-select {
      .ivu-select-selection {
        background-color: $Color-formItemBg;
        // border: 1px solid #DEDEDE;
        border-radius: 2px;
        .ivu-select-input {
          color: $Color-text;
        }
      }
      .ivu-select-selected-value {
        color: $Color-text;
      }
    }
  }
  .ivu-select-dropdown {
    border-radius: 2px;
    .ivu-select-item {
      color: $Color-text;
      &.ivu-select-item-selected,
      &:hover {
        color: $Color-primary;
      }
    }
  }
</style>
